<template>
  <div class="ship-main">
    <div id="map" class="my-map">
      <div class="div_btn">
        <input id="btn_draw_track" type="button" value="绘制" />
        <input id="btn_draw_track_edit" type="button" value="编辑" />
        <input id="btn_draw_track_finish" type="button" value="完成" />
        <input id="btn_draw_track_delete" type="button" value="删除" />
        <input id="btn_draw_track_view" type="button" value="显示" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    var _map = new ShipxyAPI.Map("map", { ak: "您的密钥" })

    var _tds // 航线对象
    var _tds_data // 航线数据
    // 航线绘制
    $("#btn_draw_track").on("click", function () {
      if (!_tds) {
        var options = {
          callBack: function (item) {
            _tds_data = item
            console.log("====航线绘制 callBack===", item)
          },
          unit: "nm",
          symbol: "ABC_"
        }
        _tds = ShipxyAPI.trackDrawSymbol(_map, options)
      }
      _tds.drawTrack()
    })
    // 航线编辑
    $("#btn_draw_track_edit").on("click", function () {
      if (_tds) {
        _tds.editLine()
      }
    })
    // 航线绘制完成
    $("#btn_draw_track_finish").on("click", function () {
      if (_tds) {
        // 只读模态
        _tds.showTrack()
      }
    })
    // 删除航线
    $("#btn_draw_track_delete").on("click", function () {
      if (_tds) {
        // 删除航线
        _tds.removeTrack()
      }
    })
    // 显示航线
    $("#btn_draw_track_view").on("click", function () {
      if (_tds_data) {
        // 显示航线
        _tds.showTrack(_tds_data)
      }
    })
    // new Vue({
    //   el: '#app',
    //   data: {},
    //   mounted() {},

    //   methods: {},
    // })
  }
}
</script>

<style lang="scss">
  .ship-main {
    width: 100%;
    height: 100%;
    .div {
        margin: 0;
      }

      .my-map {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: none;
        background-color: #a3ccff;
      }

      .div_btn {
        position: relative;
        top: 10px;
        left: 80px;
        z-index: 888;
      }

      .div_btn input[type='button'] {
        cursor: pointer;
      }
  }
</style>